<template>
    <div id="app">
        <!-- <div class="header">
            <div>
            <ul>
                <li class="li1">
                    <a href="###">jQuery学校课程选项卡布局</a>
                </li>
                <li class="li2">
                    <a href="###">手机二维码预览</a>
                </li>
            </ul>
            </div>
            <div class="clear"></div>
        </div> -->
        <div class="cneter">
            <ul>
                <li class="cent-li1">排名倒计时:</li>
                <li @click="f1">前学</li>
                <li @click="f2">小学</li>
                <div class="clear"></div>
            </ul>
            <div class="img-text">
            <div class="img">
                <a href="###">
                    <img src="https://www.jq22.com/demo/jquerykctab201911151014/images/open-bg.png">
                </a>
            </div>
            <div class="text">
                <ul>
                    <li v-for="(value,index) in 8" :key="index">
                        <p class="p1">
                            <span>
                            {{list[item].p1}}
                            </span>
                        </p>
                        <p class="p2">
                            <span>
                            {{list[item].p2}}
                            </span>
                        </p>
                        <p class="p2">
                            <span>
                             {{list[item].p3}}
                            </span>
                        </p>
                    </li>
                </ul>
            </div>
            <div class="clear"></div>
            </div>
        </div>
    </div>
</template>
<script>
import axios from "axios"
export default {
    data(){
        return{
            list:[],
            item:0,
            time:null,
            num:0
        }
    },
    mounted(){
        axios.get("/12-1.json").then(res=>{
            this.list=res.data
           }) 
            // this.time = setInterval(()=>{
            //     this.num++;
            //     console.log(this.num)
            // },1000);
        
    },
    updated(){
        window.clearInterval(this.time);
    },
    methods:{
        f1(){
            this.item=0
            console.log(this.item)
        },
        f2(){
            this.item=1
            console.log(this.item)
        }
    },
}
</script>
<style>
*{
    margin: 0;
    padding: 0;
}
a{
    text-decoration: none;
    color: white;
}
/* .header{
   
    background: #000;
    height:57px;
    position:fixed;
    top:0;
    width:100%;
}
.header > ul {
    display: flex; 
    height: 100%;
}
.li1{
    padding-left :15px;
    height: 100%;
    font-size: 20px;
}
.li2 {
    font-size: 12px;
    padding-top: 17px;
    padding-left: 45px;
    background-color: #2b2b2b;
    background: url(https://www.jq22.com/css/img/2vmd.png);
} */
.clear{
    clear: both;
}

.center > ul {
    display: flex;
    height: 50px;
}
.cent-li1{
    float: left;
    margin-right: 10%;
}
li{
    text-align: center;
    float: left;
    margin-left: 10%;
    list-style: none;
    font-size: 17px;
    width:15%;
    background: rgb(243,243,243);
}
.img-text{
    width: 100%;
    margin-top: 30px;
}
.img{
    float: left;
    width:15%;
    background: black;
    height:500px;
}
.text {
    display: flex;
    height: 100%;
}
.text ul {
    width: 100%;
    height: 500px;
}
.text > ul > li{
    width: 24%;
    height: 49%;
    margin-left: 0px;
    border-right: 1px solid gray;
    border-top: 1px solid gray;
}
.p1 {
    margin-top:5%;
    height:30%; 
}
.p2 {
    height: 15%;
    color:#9c9c9c
}



</style>